<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="aa" uri="http://ajaxanywhere.sourceforge.net/" %>
<%--<demo:demo name="test" />--%>
<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport"
		  content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>webcomponent分页测试</title>
	<script src="/webjars/jquery/3.5.1/jquery.js"></script>
	<script src="/aa.js"></script>
</head>
<body>
<aa:zone name="zoneList">
	第${pageNum}页数据：
	<ul>
		<c:forEach var="o" items="${list}" varStatus="s">
			<li> id: ${o.id} , name: ${o.name} ,createDate: ${o.createDate}</li>
		</c:forEach>
	</ul>
	<i-page pageNum="${pageNum}"
			pageSize="${pageSize}"
			total="${total}"
			url="/j/index3"
			zoneName="zoneList"/>
</aa:zone>
<%--	https://blog.csdn.net/weixin_43206949/article/details/125048148?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-125048148-blog-120522476.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-125048148-blog-120522476.pc_relevant_multi_platform_whitelistv3&utm_relevant_index=1--%>
<script type="text/javascript">
	class IPage extends HTMLElement {
		constructor() {
			super();
			debugger
			this.elementIds = [];
			const total = this.getAttribute('total');
			const pageNum = this.getAttribute('pageNum');
			const pageSize = this.getAttribute('pageSize');
			if (total < 1 || pageNum < 1 || pageSize < 1) {
				return;
			}
			// 获取所有页码数量
			let tabNum = total / pageSize;
			if (pageSize * tabNum < total) {
				tabNum += 1;
			}
			let htmlTemplate = '';
			for(let i = 1; i <= tabNum; i ++){
				this.elementIds.push({
					name: `page`+i,
					value: i,
				});
				if(pageNum == i){
					htmlTemplate += "<div class='btn' id='page"+i
							+"' style='background: blue;color:white;'>"+i+"</div>";
				}else{
					htmlTemplate += "<div class='btn' id='page"+i
							+"' >"+i+"</div>";
				}

			}
			console.log(htmlTemplate)
			const templateElem = document.createElement('template');
			templateElem.innerHTML ="<div style='display:flex;'>"+htmlTemplate+"</div>";
			const content = templateElem.content.cloneNode(true);
			this.appendChild(content);
		}
		connectedCallback() {
			//当组件被加到DOM上，或者节点在节点树中移动是，会被触发。
			console.log('组件挂在到dom上')
			for(const item of this.elementIds){
				if(document.getElementById(item.name)){
					document.getElementById(item.name).addEventListener("click",(e)=>{
						ajaxAnywhere.getAJAX(this.getAttribute('url')+
								'?pageSize=${pageSize}&&pageNum='+item.value,this.getAttribute('zoneName'));
					});
				}
			}
		}

	}
	console.log("注册webcomponent i-page ");
	customElements.define("i-page", IPage);
</script>
<style>
	.btn{
		height: 30px;margin-right:5px;cursor: pointer;width: 30px;border: 1px #a1a1a1 solid;display: flex;justify-content: center;align-items: center;
		background: buttonface;border-radius: 5px;
	}</style>
</body>
</html>
